<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
<div class="layui-row">
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">小班管理</div>
            <div class="layui-card-body">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>

</div>
<div class="layui-row">
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">

                <input type="submit" class="layui-btn" id="addBtn" value="添加新班级">


        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">
            <div class="layui-form-item">
                <label class="layui-form-label">小班名称</label>
                <div class="layui-input-block">
                    <input id="qcName" type="text" name="f_pestName" required  lay-verify="required" placeholder="请输入害虫名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责区域</label>
                <div class="layui-input-block">
                    <input id="qcArea" type="text" name="f_host" required  lay-verify="required" placeholder="请输入害虫宿主" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" id="queryBtn">查询</button>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
<script src="../layui/layui.all.js"></script>
<script>
    layui.use(['table','jquery','layer'],function () {
        var table = layui.table;
        var $ =layui.$;
        //第一个实例
        t=table.render({
            elem: '#demo',
            height: 400,
            url: '/pestSystem/class.do' //数据接口
            ,
            page: true //开启分页
            ,
            cols: [
                [ //表头
                    {
                        field: 'pkid',
                        title: 'ID',
                        width: 80,
                        // sort: true,
                        fixed: 'left'
                    }, {
                    field: 'f_className',
                    title: '班级名',
                    // width: 80,
                    // edit: true
                }, {
                    field: 'f_leader',
                    title: '负责人',
                    // width: 80,
                    // sort: true
                }, {
                    field: 'f_tel',
                    title: '负责人电话',
                    // width: 80
                }, {
                    field: 'fk_areaId',
                    title: '负责区域',
                    // width: 177
                    templet:'<div>{{d.area.f_areaName}}</div>'
                },{
                    field:'right',
                    toolbar:'#barDemo'
                }
                ]
            ]
        });
        $("#queryBtn").on("click",function () {
            t.reload({
                where:{
                    f_className:$("#qcName").val(),
                    f_areaName:$("#qcArea").val()
                },
                page:{
                    curr:1
                }
            });
        });

        $("#addBtn").on("click",function () {
            $.ajax({
                type: "get",
                url: "/pestSystem/area.do?method=queryNoClassArea",
                dataType:"json",
                success:function(data){
                    // for (let i = 0; i < data.length; i++) {
                    //     console.log(data[i]);
                    //
                    // }
                        layer.open({
                            type: 2 //此处以iframe举例
                            ,content:"/pestSystem/home/addClass.html"
                            ,title: '添加班级'
                            ,area: ['400px', '400px']
                            ,shade:[0.8, '#393D49']

                            ,anim:4
                            ,maxmin: true
                            ,btn: ['确定', '关闭'] //只是为了演示
                            ,yes: function(index,layero){
                                let body = layer.getChildFrame('body',index);
                                let pkid =body.find("select[name=city]").val();
                                let f_className =body.find("input[name=f_className]").val();
                                let f_leader =body.find("input[name=f_leader]").val();
                                let f_tel =body.find("input[name=f_tel]").val();
                                $.ajax({
                                    type:"get",
                                    url:"/pestSystem/class.do?method=addClass",
                                    data:{"pkid":pkid,"f_className":f_className,"f_leader":f_leader,"f_tel":f_tel},
                                    success:function(data){
                                        console.log(data);
                                        if(data == "true"){
                                            layer.msg("修改成功")
                                            t.reload({
                                                page: {
                                                    curr: 1 //重新从第 1 页开始
                                                }
                                            });
                                        }
                                        else{
                                            layer.msg("修改失败")
                                        }
                                    }
                                })

                                layer.close(index);
                            }
                            ,btn2: function(index){
                                layer.msg("bbb");
                                layer.close(index);
                                return false;
                            }
                            ,success:function(layero,index){
                                let body = layer.getChildFrame('body',index);
                                body.find("input[name=pkid]").val();
                                body.find("input[name=f_className]").val();
                                body.find("input[name=f_leader]").val();
                                body.find("input[name=f_tel]").val();
                                let str="";
                                for (let i = 0; i <data.length ; i++) {

                                     str+="<option value='"+data[i].pkid+"'>"+data[i].f_areaName+"</option>";

                                }

                                body.find("select[name=city]").html(str);
                            }
                        })

                }
            })

        });
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                layer.open({
                    type: 2 //此处以iframe举例
                    ,content:"/pestSystem/home/classDetail.html"
                    ,title: '班级详情'
                    ,area: ['400px', '400px']
                    ,shade:[0.8, '#393D49']

                    ,anim:4
                    ,maxmin: true
                    ,btn: ['确定', '关闭'] //只是为了演示
                    ,yes: function(index,layero){
                        let body = layer.getChildFrame('body',index);
                        // console.log(body);
                        // let pestName = body.find("input[name=f_pestName]").val();
                        // console.log(pestName);
                        layer.close(index);
                    }
                    ,btn2: function(){
                        layer.msg("bbb");
                        layer.close();
                        return false;
                    }
                    ,success:function(layero,index){
                        let body = layer.getChildFrame('body',index);
                        body.find("input[name=pkid]").val(data.pkid);
                        body.find("input[name=f_className]").val(data.f_className);
                        body.find("input[name=f_leader]").val(data.f_leader);
                        body.find("input[name=f_tel]").val(data.f_tel);
                        body.find("input[name=f_areaName]").val(data.area.f_areaName);
                    }
                })
            }
            else if(layEvent === 'del'){ //删除
                layer.confirm('真的要删除吗', function(index){
                    // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    // layer.close(index);
                    // //向服务端发送删除指令
                    $.ajax({
                        type:"get",
                        url:"/testAjax/test?method=delete&deleteId="+data.pk_id,
                        success:function (data) {
                            if(data=="true"){
                                layer.msg("删除成功");
                                obj.del();
                            }else{
                                layer.msg("删除失败");
                            }

                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2 //此处以iframe举例
                    ,content:"/pestSystem/home/classDetail.html"
                    ,title: '班级详情'
                    ,area: ['400px', '400px']
                    ,shade:[0.8, '#393D49']

                    ,anim:4
                    ,maxmin: true
                    ,btn: ['确定', '关闭'] //只是为了演示
                    ,yes: function(index,layero){
                        let body = layer.getChildFrame('body',index);
                        let pkid =body.find("input[name=pkid]").val();
                        let f_leader =body.find("input[name=f_leader]").val();
                        let f_tel =body.find("input[name=f_tel]").val();
                        $.ajax({
                            type:"get",
                            url:"/pestSystem/class.do?method=updateClass",
                            data:{"pkid":pkid,"f_leader":f_leader,"f_tel":f_tel},
                            success:function(data){
                                console.log(data);
                                if(data == "true"){
                                    layer.msg("修改成功")
                                    t.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    });
                                }
                                else{
                                    layer.msg("修改失败")
                                }
                            }

                        });
                        layer.close(index);
                    }
                    ,btn2: function(){
                        layer.msg("bbb");
                        layer.close();
                        return false;
                    }
                    ,success:function(layero,index){
                        let body = layer.getChildFrame('body',index);
                        body.find("input[name=pkid]").val(data.pkid);
                        body.find("input[name=f_className]").val(data.f_className);
                        body.find("input[name=f_leader]").val(data.f_leader);
                        body.find("input[name=f_tel]").val(data.f_tel);
                        body.find("input[name=f_areaName]").val(data.area.f_areaName);
                    }
                })
            }
        });

    });
</script>

</html>